<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日志详情 - 日志分析系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #4361ee;
      --danger-color: #ef476f;
      --success-color: #06d6a0;
      --warning-color: #ffd166;
      --info-color: #118ab2;
      --gray-color: #6c757d;
      --light-bg: #f8f9fa;
      --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      --sidebar-width: 250px;
    }
    
    body {
      background: #f4f6fa;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      overflow-x: hidden;
    }
    
    /* 侧边栏样式 */
    .sidebar {
      width: var(--sidebar-width);
      background: linear-gradient(180deg, #1a1f25 0%, #2c3038 100%);
      color: #fff;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 100;
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }
    
    .sidebar-brand {
      padding: 1.5rem;
      font-weight: 600;
      color: #fff;
      font-size: 1.25rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 1rem;
    }
    
    .sidebar .nav-link {
      color: rgba(255,255,255,0.75);
      padding: 0.8rem 1.5rem;
      margin-bottom: 0.25rem;
      border-radius: 6px;
      transition: all 0.2s;
    }
    
    .sidebar .nav-link:hover {
      color: #fff;
      background: rgba(255,255,255,0.1);
    }
    
    .sidebar .nav-link.active {
      background: var(--primary-color);
      color: #fff;
      box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
    }
    
    .sidebar .nav-link i {
      width: 24px;
      text-align: center;
      margin-right: 8px;
    }
    
    /* 主内容区域 */
    .content {
      margin-left: var(--sidebar-width);
      padding: 1.5rem;
      min-height: 100vh;
      width: calc(100% - var(--sidebar-width));
    }
    
    .detail-main {
      max-width: 100%;
      margin: 0 auto;
    }
    
    .page-header {
      margin-bottom: 1.25rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .page-title {
      font-weight: 700;
      color: #2d3748;
      font-size: 1.75rem;
      margin-bottom: 0;
    }
    
    /* 卡片样式统一 */
    .card {
      border: none;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
      margin-bottom: 1.5rem;
      overflow: hidden;
    }
    
    .card-header {
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      font-weight: 600;
      font-size: 1.05rem;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
    }
    
    .card-header i {
      margin-right: 0.5rem;
      color: var(--primary-color);
    }
    
    .card-body {
      padding: 1.25rem;
    }
    
    .badge {
      font-weight: 500;
      padding: 0.35em 0.65em;
      font-size: 0.75em;
    }
    
    .log-raw {
      background: var(--light-bg);
      border-radius: 8px;
      padding: 1.25rem;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.9rem;
      color: #333;
      line-height: 1.5;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-all;
    }
    
    .table th {
      width: 180px;
      color: #64748b;
      font-weight: 600;
      font-size: 0.9rem;
    }
    
    .table td {
      font-size: 0.95rem;
    }
    
    .btn-back {
      color: #fff;
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      padding: 0.5rem 1.25rem;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.2s;
    }
    
    .btn-back:hover {
      background-color: #3a56d4;
      border-color: #3a56d4;
    }
    
    /* 响应式调整 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
      }
      
      .sidebar .nav-link span,
      .sidebar-brand span {
        display: none;
      }
      
      .sidebar-brand {
        padding: 1.5rem 0;
        text-align: center;
      }
      
      .sidebar .nav-link {
        padding: 0.8rem 0;
        text-align: center;
      }
      
      .sidebar .nav-link i {
        margin-right: 0;
        font-size: 1.25rem;
      }
      
      .content {
        margin-left: 70px;
        width: calc(100% - 70px);
        padding: 1.25rem 1rem;
      }
    }
    
    @media (max-width: 768px) {
      .content {
        padding: 1rem 0.75rem;
      }
      
      .detail-main {
        max-width: 100%;
      }
      
      .card-header {
        padding: 0.75rem 1rem;
      }
      
      .card-body {
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="d-flex">
    <!-- 侧边栏导航 -->
    <nav class="sidebar">
      <div class="sidebar-brand">
        <i class="fas fa-chart-line"></i>
        <span>日志分析系统</span>
      </div>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a href="dashboard.html" class="nav-link">
            <i class="fas fa-tachometer-alt"></i>
            <span>仪表盘</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="search.html" class="nav-link">
            <i class="fas fa-search"></i>
            <span>日志检索</span>
          </a>
        </li>
    
   
      </ul>
    </nav>
    
    <!-- 主内容区域 -->
    <main class="content">
      <div class="detail-main">
        <!-- 页面标题 -->
        <div class="page-header d-flex justify-content-between align-items-center">
          <h1 class="page-title">
            <i class="fas fa-file-alt text-primary me-2"></i>
            日志详情
          </h1>
          <div>
            <a href="search.html" class="btn btn-outline-secondary">
              <i class="fas fa-arrow-left me-1"></i>返回检索
            </a>
          </div>
        </div>
        
        <div class="row">
          <!-- 结构化字段 -->
          <div class="col-lg-5">
            <div class="card mb-4">
              <div class="card-header">
                <i class="fas fa-table"></i>结构化字段
              </div>
              <div class="card-body">
                <table class="table table-sm mb-0">
                  <tbody>
                    <tr>
                      <th>日志时间</th>
                      <td>2025-05-08 07:51:54</td>
                    </tr>
                    <tr>
                      <th>级别</th>
                      <td><span class="badge bg-info">INFO</span></td>
                    </tr>
                    <tr>
                      <th>类型</th>
                      <td>ACL</td>
                    </tr>
                    <tr>
                      <th>源IP</th>
                      <td>172.16.232.6</td>
                    </tr>
                    <tr>
                      <th>目标IP</th>
                      <td>10.122.38.1</td>
                    </tr>
                    <tr>
                      <th>格式</th>
                      <td>kv</td>
                    </tr>
                    <tr>
                      <th>关键信息</th>
                      <td>访问请求已允许 (Permit)</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          
          <!-- 原始日志 -->
          <div class="col-lg-7">
            <div class="card mb-4">
              <div class="card-header">
                <i class="fas fa-file-code"></i>原始日志
              </div>
              <div class="card-body">
                <div class="log-raw">%10FILTER/6/FILTER_ZONE_IPV4_EXECUTION: SrcZoneName(1025)=ParDMZ;DstZoneName(1035)=DMZ;Type(1067)=ACL;SecurityPolicy(1072)=ParDMZ-DMZ-DMZ-2020103001;RulelD(10778)=10540;Protocol(1001)=TCP;Application(1002)=general_tcp;SrclPAddr(1003)=172.16.232.6;SrcPort(1004)=401418;DstlPAddr(1007)=10.122.38.1;DstPort(1008)=100000;MatchCount(1069)=3;Event(1048)=Permit;</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 额外信息 -->
        <div class="row">
          <div class="col-12">
            <div class="card mb-4">
              <div class="card-header">
                <i class="fas fa-info-circle"></i>安全分析
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-md-6">
                    <h6 class="fw-bold mb-3">事件评估</h6>
                    <ul class="list-unstyled">
                      <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>安全策略正常执行</li>
                      <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i>符合访问控制规则</li>
                      <li class="mb-2"><i class="fas fa-info-circle text-info me-2"></i>常规网络通信</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <h6 class="fw-bold mb-3">相关信息</h6>
                    <ul class="list-unstyled">
                      <li class="mb-2"><span class="fw-semibold">策略ID:</span> ParDMZ-DMZ-DMZ-2020103001</li>
                      <li class="mb-2"><span class="fw-semibold">规则ID:</span> 10540</li>
                      <li class="mb-2"><span class="fw-semibold">协议:</span> TCP</li>
                      <li class="mb-2"><span class="fw-semibold">应用:</span> general_tcp</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 相关操作 -->
        <div class="d-flex gap-2">
          <a href="search.html" class="btn btn-back">
            <i class="fas fa-arrow-left me-1"></i>返回列表
          </a>
        </div>
      </div>
    </main>
  </div>

  <!-- 脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 